<template>
    <div class="homePage">
        <!-- 标题 -->
        <nav-bar title="公共条码查询"></nav-bar>
        <div class="searchBox">
            <div class="search">
                <van-search v-model="searchValue" placeholder="请输入条码" @input="onInput"/>
            </div>
            <div class="scanBox" @click="scanCode">
                <img src="../../assets/img/scanning-two@2x.png" alt="图标失效">
            </div>
        </div>
        <div :class="abnormal === false ? 'tableTitle':'tableTitle1'">
            <div :class="abnormal === false ? 'barcodeBox':'barcodeBox1'">条码</div>
            <div class="fieldBox">
                <div class="orderNoBox">生产订单号</div>
                <div class="levelBox">层级</div>
                <div class="rationBox">定量</div>
            </div>
        </div>
        <scroll class="content" ref="scroll" v-if="hasdata">
            <TableList :abnormal="abnormal" :dataList="dataList" @heClick="heClick" @daiClick="daiClick"></TableList>
        </scroll>
        <default-page v-else class="default-page"></default-page>
        <BottomFixButton leftBtnText="返回" rightBtnText="确认" @leftBtnClick="goBack" @rightBtnClick="goToReset"></BottomFixButton>
    </div>
</template>

<script>


//    window.H5AppBridge = {
//         sayHello: function(data){
//         let objData = {};
//         objData.type = 'sayHello';
//         objData.data = data;
//         window.postMessage(JSON.stringify(objData));
//         alert("sayHello")
//         }
//     };

    import  NavBar from '../../components/NavBar.vue'
    import BottomFixButton from '../../components/BottomFixButton.vue'
    import Scroll from '../../components/Scroll.vue'
    import TableList from '../../components/TableList.vue'
    import DefaultPage from '../../components/DefaultPage.vue'
    import {debounce} from '../../assets/js/tool/debounce.js'
    import H5BridgeApi from '@/assets/js/H5BridgeApi'
    import WebviewBus from 'rn-webview-bus'
    import "../../main.js"
    export default {
        name: "HomePage",
        components: {
            NavBar,
            BottomFixButton,
            Scroll,
            TableList,
            DefaultPage,
        },
        data() {
            return {
                dataList: [],
                searchValue: '', //搜索框的值
                abnormal:false, //先判断是否有异常,有遗异常给异常图标占位置
                hasdata: false ,//请求中是否有数据
            }
        },
        mounted(){
//  // 创建 WebviewBus 实例
//     this.webviewBus = new WebviewBus(window)

//     // 监听 Native 的 back 事件
//          this.webviewBus.on('scanCodeResult', (data) => {
             
//              console.log(data.title)
//     })
        },
        created() {
            //获取公共条码数据
            this.getBarcodeDataList();
            var b = "";
            var _this = this;
            document.onkeydown = function(event) {
            //   if (event.keyCode != 13) {
            //     var bizCode = String.fromCharCode(event.keyCode);
            //     if (event.keyCode >= 48 && event.keyCode <= 123) {
            //       b = b + bizCode;
            //     }
            //   } else {
            //     b = "";
            //   }
            //   alert(event.code)
             
            };


           
            // if(window.plus){
            //      alert("TEST1")
			// 	plusReady(); //点我我司设备扫描按钮之后,会触发这个Function
			// }else{
            //      alert("TEST2")
                
			// 	document.addEventListener('plusready', function() {
            //         //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。
            //         alert("TEST3")
            //         // plus.key.addEventListener("keydown", function(e) { 
            //         //     console.log("监听keyCode"  +  e.keyCode); 
            //         // }, false);
            //         // plusReady(); //点我我司设备扫描按钮之后,会触发这个Function
			//     });
			// }

             


        },
        methods: {
            //点击了盒展开按钮
            heClick(item, index) {
                //console.log('点击了盒展开按钮',item,index);
                //更改展开状态
                //console.log('盒',this.dataList[0].Children[index]);
                this.dataList[0].Children[index].isShow = !this.dataList[0].Children[index].isShow;
                
            },
            //点击了袋展开按钮
            daiClick(item, parentIndex, index) {
                //console.log('点击了袋展开按钮',item,parentIndex,index);
                //更改展开状态
                //console.log('袋',this.dataList[0].Children[parentIndex].Children[index]);
                this.dataList[0].Children[parentIndex].Children[index].isShow = !this.dataList[0].Children[parentIndex].Children[index].isShow;
            },
            getBarcodeDataList() {
                //发送请求
                let params = {
                    ApiType: 'BillReportController',
                    Parameters: [
                        {
                            Value: this.searchValue + '' ,//SN060816180009028
                        }
                    ],
                    Method: 'FindBarcodeRptListInterface',
                    Loading: true,
                };
                //console.log('请求的查询参数',params);
                this.$axios(params).then(res => {
                    if(res.Success){
                        if(res.Result.length > 0){
                            this.hasdata = true;
                        }else {
                            this.hasdata = false;
                        }
                        const resList = res.Result;
                        resList.forEach((item)=> {
                            if(item.Children){
                                item.Children.forEach((item1,j)=> {
                                    item1.isShow = false; //盒默认收起
                                    if(item1.Children){
                                        item1.Children.forEach((item2) => {
                                            item2.isShow = false;//袋默认收起
                                        })
                                    }
                                })
                            }
                        })
                        this.dataList = resList;
                        const list = this.dataList;
                        //箱遍历
                        list.forEach((el) => {
                            if(el.Abnormal){
                                this.abnormal = true;
                            }else if(el.Children.length>0){
                                //盒遍历
                                el.Children.forEach((ele) => {
                                    if(ele.Abnormal){
                                        this.abnormal = true;
                                    }else if(ele.Children.length>0){
                                        //袋遍历
                                        ele.Children.forEach((elem) => {
                                            if(elem.Abnormal){
                                                this.abnormal = true;
                                            }
                                        })
                                    }
                                })
                            }
                        })
                        // console.log(' this.abnormal', this.abnormal)
                        // console.log(' this.dataList', this.dataList)
                        }
                    });
                
            },
            //点击扫码图标的事件
            scanCode() {





                let that = this;
                // console.log('点击了扫码功能！');
                // alert("点击了扫码功能！")
                let data = {}
                data.params = {
                    msg: "from h5 call"
                }
                window.bridgeApi.scanCode((res)=>{
                   // alert("scan code:" + res)
                    if(res){
                        that.searchValue = res; //条码赋值
                        that.getBarcodeDataList();//请求条码数据
                    }
                })
            },
            //输入框发生改变触发的事件
            onInput: debounce(function(){
                console.log(' this.searchValue', this.searchValue);
                this.getBarcodeDataList();
            },1000),
            //点击返回按钮关闭app，返回smom平台
            goBack() {
                console.log('点击了返回按钮')
                this.$hybridApi.closeApp();
            },
            //点击确认按钮 目前的逻辑是将将数据初始化
            goToReset() {
                console.log('点击了确认按钮，重置数据');
                this.searchValue = '';
                this.getBarcodeDataList();
            }
        },
    }
</script>

<style lang="less" scoped>
.homePage {
    width: 100vw;
    background-color: #f2f2f2;
    //搜索框
    .searchBox {
        height: 1.296296rem;
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        .search {
            flex: 1;
            height: 1.296296rem;
            background-color: #fff!important;
            //因scoped 作用域的问题，必须加上& /deep/才可以覆盖ui组件样式
            & /deep/ .van-search {
                padding-top: 10px;
                height: 1.296296rem;
                background-color: #fff!important;
                .van-search__content {
                    background-color: #fff!important;
                    border: 1px solid #eee;
                    // font-size: 14px;
                    font-size: .555556rem;
                    .van-cell {
                        padding: 1px 8px 1px 0;
                        height: .833333rem;
                        line-height: .833333rem;
                    }
                }
            }
            ::-webkit-input-placeholder {
                font-size: 12px;
            }
            ::placeholder {
                font-size: 12px;
            }
        }
        .scanBox {
            margin-right: 5px;
            //width: 40px;
            // width: .740741rem;
            height: 1.296296rem;
            line-height: 1.296296rem;
            //line-height: 44px;
            text-align: center;
            img {
                width: .740741rem;
                height: .740741rem;
                vertical-align: middle;
            }
        }
    }
    .tableTitle {
        margin-top: .277778rem;
        padding: 0 .277778rem 0 .37037rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: .925926rem;
        line-height: .925926rem;
        background-color: #fff;
        font-size: 14px;
        font-weight: 600;
        .barcodeBox {
            flex-basis: 50%;
            padding-left: .185185rem;
        }
        .barcodeBox1 {
            flex-basis: 50%;
            padding-left: .555556rem;
        }
        .fieldBox {
            display: flex;
            flex-basis: 50%;
            justify-content: space-between;
            align-items: center;
        }
    }
    .tableTitle1 {
        margin-top: .277778rem;
        padding: 0 .277778rem 0 .925926rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: .925926rem;
        line-height: .925926rem;
        background-color: #fff;
        font-size: 14px;
        font-weight: 600;
        .barcodeBox {
            flex-basis: 50%;
            padding-left: .185185rem;
        }
        .barcodeBox1 {
            flex-basis: 50%;
        }
        .fieldBox {
            display: flex;
            flex-basis: 50%;
            justify-content: space-between;
            align-items: center;
            .orderNoBox {
                flex-shrink: 0;
            }
            .levelBox {
                flex-shrink: 0;
            }
            .rationBox {
                flex-shrink: 0;
            }
        }
    }
    .content {
        overflow: hidden;
        background-color: #f2f2f2;
        position: absolute;
        top: 3.611111rem;
        bottom: 45px;
        left: 0;
        right: 0;
    }
    .default-page {
        overflow: hidden;
        background-color: #f2f2f2;
        position: absolute;
        top: 3.611111rem;
        bottom: 45px;
        left: 0;
        right: 0;
    }
}
</style>